<template>
	<div class="add-account-dialog-box">
		<div class="choose-list-top-btns-save" @click="onAddEdocOrgTeam">
			<span class="choose-list-top-btns-save-label">{{$i18n('selectPeople.saveAsEdocTeam.lable')}}</span>
		</div>
		<a-modal
			:title="$i18n('selectPeople.saveAsEdocTeam.lable')"
			:visible="visible"
			:confirm-loading="confirmLoading"
			:okText="$i18n('common.button.ok.label')"
			:cancelText="$i18n('common.button.cancel.label')"
			@ok="onSubmit"
			@cancel="onHandleCancel"
			:global="dialogWindow"
		>
			<a-form-model
				ref="ruleForm"
				class="line-box-footer"
				:model="form"
				:rules="rules"
				:label-col="{ span: 4 }"
				:wrapper-col="{ span: 18 }"
			>
				<a-form-model-item ref="name" :label="$i18n('common.name.label')" prop="name">
					<a-input  v-model.trim="form.name"/>
				</a-form-model-item>
				<a-form-model-item :label="$i18n('selectPeople.includeDepartment')" prop="departNames">
					<a-textarea v-model.trim="form.departNames" disabled style="resize: none;" />
				</a-form-model-item>
				<a-form-model-item ref="sortId" :label="$i18n('common.sort.label')" prop="sortId">
					<a-input v-model.trim="form.sortId" />
				</a-form-model-item>
				<a-form-model-item :label="$i18n('common.resource.body.description.label')" ref="description" prop="description">
					<a-textarea v-model.trim="form.description" style="resize: none;height: 80px;" />
				</a-form-model-item>
			</a-form-model>
		</a-modal>
	</div>
</template>

<script>
import { getPanelData } from '@/api/modules/SelectOrgApi';
import { mapState } from 'vuex';
import { EntityTypes, GroupId } from '@/utils/orgConstants';
import { MaskAsync } from "@/utils/Mask";
import { entityFormat } from '@/utils/utils';

export default {
	name: 'addEdocOrgTeamDialog',
	inject: ['app'],
	data() {
		return {
			visible: false,
			form: {
				name: '',
				sortId: '',
				grantedDepartId: '',
				departNames: '',
				description: ''
			},
			rules: {
				name: [
					{ required: true, message: this.$i18n('selectPeople.name.empty', this.$i18n('common.name.label'))},
					{ max: 85, message: this.$i18n('selectPeople.name.rules')},
					{ pattern: /^[^"\^@#><:\*?'&%$\-=+!~+|/\\]+$/g, message: this.$i18n('selectPeople.notUse.tip') + "\"\\\\/|><:*?'&%$@#^-=+!~"},
				],
				departNames: [
					{ required: true, message: this.$i18n('selectPeople.name.empty', this.$i18n('selectPeople.includeDepartment')) }
				],
				sortId: [
					{ required: true, message: this.$i18n('selectPeople.name.empty', this.$i18n('selectPeople.sort.label')) },
					{ max: 5, message: this.$i18n('selectPeople.sort.rules') },
					{ pattern: /^(\d|[1-9]\d{1,4})$/g, message: this.$i18n('selectPeople.not.init', this.$i18n('selectPeople.sort.label')) , },
				],
				description: [
					{ max: 256, message: this.$i18n('selectPeople.description.rules')},
				]
			}
		};
	},
	computed: {
		...mapState('selectData', ['selectedList'])
	},
	watch: {
		visible(val) {
			if (val) {
				window.showbarMask();
			} else {
				window.hidebarMask();
			}
		}
	},
	methods: {
		async onAddEdocOrgTeam() {
			this.visible = true;

			this.form.name = '';
			this.form.sortId = '1';
			this.form.description = '';

			let names = [];
			let typeIds = [];
			let selectedList = this.selectedList;
			const orgSelect = this.app().orgSelect;
			const { loginAccountId } = orgSelect;

			for (let item of selectedList) {
				if (item.type === EntityTypes.Department || item.type === EntityTypes.OrgMetadataTag ||(item.type === EntityTypes.Account && item.id !== GroupId)) {
					const dataFormat = entityFormat(item, loginAccountId, orgSelect);
					names.push(dataFormat.name);
					typeIds.push(item.type + '|' + item.id);
				}
			}
			this.form.departNames = names.join('、');
			this.form.grantedDepartId = typeIds.join(',');

			// 最大排序号
			let res = await getPanelData({
				panel: 'OrgTeam',
				command: 'getMaxSortNum',
				arguments: {
					teamType: 'PERSON_TEAM'
				}
			});
			if (res.code === 0) {
				this.form.sortId = res.data.data.maxSortId;
			}
		},
		@MaskAsync
		async onSubmit() {
			await this.$refs.ruleForm.validate();
			await this.onHandleOk();
		},
		async onHandleOk() {
			this.confirmLoading = true;
			let params = {
				panel: 'OrgTeam',
				command: 'saveTeam',
				arguments: {
					teamType: 'PERSON_TEAM',
					...this.form
				}
			};
			let res = await getPanelData(params);
			const { code, message, data } = res;
			if(Number(code) !== 0) {
				this.$message.error(message)
				this.confirmLoading = false;
				return;
			}
			const { code: appCode, msg } = data;
			if(Number(appCode) === 0) {
				this.$message.success(this.$i18n('common.successfully.saved.label'))
				this.visible = false;
				this.confirmLoading = false;
				this.$emit('onUpdateEdocOrgTeamList');
			} else {
				this.confirmLoading = false;
				this.$message.error(msg)
			}
		},
		onHandleCancel() {
			this.visible = false;
			this.$refs.ruleForm.resetFields();
		}
	}
};
</script>

<style lang="scss">
.line-box-footer {
	.grop-box-model {
		.ant-col {
			width: 100%;

			.ant-form-explain {
				text-align: left;
				padding-left: 115px;
			}
		}
	}

	textarea::-webkit-scrollbar {
		width: 5px;
	}
	textarea::-webkit-scrollbar-thumb {
		border-radius: 5px;
	}

	.group-box {
		width: 100%;
		overflow: auto;
		display: flex;

		.grouo-label {
			display: inline-block;
			width: 118px;
			height: 32px;
			text-align: right;
			color: rgba(0, 0, 0, 0.85);

			&::before {
				content: "*";
				color: #f5222d;
				margin-right: 4px;
				display: inline-block;
			}
		}

		.content-item {
			width: 275px;
			height: 120px;
			overflow: auto;
			border: 1px rgb(212, 212, 212) solid;

			.item-box {
				display: block;
				width: 100%;
				height: 22px;
				line-height: 22px;
				cursor: pointer;
				padding-left: 10px;
				box-sizing: border-box;

				&.active-item {
					background: $checkedColor;
					color: $defaultFontColor;
				}
			}
		}
	}

	.ant-form-item-label{line-height: 32px;}
	.ant-form-item-control{line-height: 32px;}
}
</style>
